<template>
  <div>
    <!-- 图片上传 -->
    <el-upload
      :data="qiniuToken"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :file-list="$imags"
      :multiple="multiple"
      :limit="limit"
      :on-exceed="onExceed"
      :before-upload="beforeUpload"
      :class="{hide:hideUpload}"
      action="http://upload.qiniu.com/"
      list-type="picture-card"
      accept="image/png, image/jpeg"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img
        :src="dialogImageUrl"
        width="100%"
        alt
      >
    </el-dialog>
  </div>
</template>

<script>
// import Global from '@/store/global'

export default {
  name: '',
  components: {},
  mixins: [],
  props: {
    // 单张是字符串，多张数组
    imgs: {
      type: Array,
      default () {
        return []
      }
    },
    // 是否支持多选
    multiple: {
      type: Boolean,
      default () {
        return true
      }
    },
    token: {
      type: String
    },
    // 限制数量
    limit: {
      type: Number,
      default: 99999
    }
  },
  data () {
    return {
      Global: {
        qiniuInfo: {
          url: 'http://static.bocai.mobi/',
          imageView2: '?imageView2/0/w/105/h/105'
        }
      },
      hideUpload: false,
      dialogImageUrl: '',
      dialogVisible: false,
      qiniuToken: {
        token: 'Wv6yycHZF4qoetDCIvHNaFD-D-EdZpZkEHe121JH:JgVGTgw5jKB46zw8AcVx3Z2nEcM=:eyJzY29wZSI6ImJvY2FpLWtpdGNoZW4iLCJkZWFkbGluZSI6MTYzNDQ4ODc5OH0='
      },
      fileList: [],
      loading: null
    }
  },
  computed: {
    $imags: {
      get () {
        return this.imgs
      },
      set (val) {
        this.$emit('update:imgs', val)
      }
    }
  },
  watch: {
    token (cur) {
      if (cur) {
        this.qiniuToken.token = this.token
      }
    }
  },
  created () {
    this.qiniuToken.token = this.token
    if (this.imgs.length >= this.limit) {
      this.hideUpload = true
    }
  },
  mounted () { },
  destroyed () { },
  methods: {
    // 移除文件时的钩子
    handleRemove (file, fileList) {
      this.$imags.splice(this.$imags.indexOf(file), 1)
      const imags = this.$imags
      this.$imags = imags
      this.hideUpload = fileList.length >= this.limit
    },
    // 上传成功时的钩子
    handleSuccess (res, file, fileList) {
      fileList.map(v => {
        if (v.response) {
          v.url = this.Global.qiniuInfo.url + v.response.key
        }
      })
      this.$imags = fileList
      this.hideUpload = fileList.length >= this.limit
      this.loading.close()
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload () {
      this.loading = this.$loading(this.$loadingOptions)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 选择的文件超过限制
    onExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    }
  }
}
</script>
<style lang="less">
.hide .el-upload--picture-card {
  display: none;
}
</style>
